iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 13
0
Data Technology

GraphQL + ApolloData 入門系列 第 13

ApolloData & Mutaion (一)

  • 分享至 

  • xImage
  •  

介紹
ApolloData Client 在可以 Query 資料之外,還可以使用GraphQL Mutation。在GraphQL中,Mutation與Query 的語法中是相同的,在gql的 payload query 唯一的區別是使用關鍵字 mutation 而不是 query(預設 query可以不用寫) 。 另外還有一些設定例如update cache的部分不太一樣。

gql 內容與 query 相同只是多了 mutation


mutation {
  submitRepository(repoFullName: "apollographql/apollo-client") {
    id
    repoName
  }
}

基本的 mutation 會使用到的 lib 也都跟 query 一樣

mport React, { Component } from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';

class NewEntry extends Component { ... }

const submitRepository = gql`
  mutation submitRepository {
    submitRepository(repoFullName: "apollographql/apollo-client") {
      createdAt
    }
  }
`;

const NewEntryWithData = graphql(submitRepository)(NewEntry);

最長見最簡單 mutation 使用,可以使用ApolloData 提供的 props.mutate method 直接定義好gql 看需要哪些參數如下就可以發一個 mutation的 payload到Server 端了。

省略...
class NewEntry extends Component {
  onClick() {
    this.props.mutate({
      variables: { repoFullName: 'apollographql/apollo-client' }
    })
      .then(({ data }) => {
        console.log('got data', data);
      }).catch((error) => {
        console.log('there was an error sending the query', error);
      });
  }
省略...

Apollo 可以直接在元件的方法來來進行 fetch,但通常都會封裝在一個 method 底下,在使用 HOC 的時候就可以透過graphql 第二個參數 物件中的 props 使用 apollo 提供的 mutate 去包裝起來 ,下面程式碼的 submit 就是一個 props.submit 的 method ,設定後後在元件之中之需要傳入參數就可以了,如果沒有這邊定義好 Method 讓apollo代理, 直接 fetch 就要再寫 then 去接帶回傳的資料。


const submitRepository = gql`...`; // Same query as above

const NewEntryWithData = graphql(submitRepository, {
  props: ({ mutate }) => ({
    submit: (repoFullName) => mutate({ variables: { repoFullName } }),
  }),
})(NewEntry);

總結

ApolloData 提供 mutation 可以在元件中直接使用,也可以透過graphql 的第二個參數中的 props 綁一個function 元件使用 ,使用上跟query都差不多只是在寫 gql語法要多加一個mutation


上一篇
ApolloData & Query method (三)
下一篇
ApolloData & Mutation (二)
系列文
GraphQL + ApolloData 入門30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言